<template>
  <div class="app">
    <div class="section_wrap" v-for="(item,index) in list" :key="item.id">
    <div class="section">
      <div class="top_bar">
        <div class="left">
          <div
            class="sel" :class="{on: activeIndex === index || item.id == option.current_stage_group_id}"  @click="chooseTemplateStage(item.id,index)"/>
          <span>{{item.name}}</span>
          <div class="label" v-if="item.is_default">默认</div>
        </div>
        <div class="right" @click="showOptionBar(item.is_default,item.id)">
          <div class="btn">编辑</div>
        </div>

      </div>
      <div class="label_list" v-if="!$util.isEmpty(item.hkds_site_stage)">
        <div
          class="label_item"
          :key="index"
          v-for="(subItem,index) in item.hkds_site_stage">{{ subItem.name }}</div>
      </div>
    </div>
    </div>

    <div class="add_btn" @click="toEditStageTemplate">
      <div class="center">
        <view class="iconfont iconicon-test"/>
        <span>新建模板</span>
      </div>
    </div>
  </div>
</template>

<script>

import { getAllStageTemplate, setDefaultStageTemplate, delStageTemplate, setStageTemplate } from '@/api/constructionSite'

export default {
	data() {
		return {
			option: {},
			list: [],
			activeIndex: null
		}
	},
	onLoad(option) {
		this.option = option
	},
	onShow() {
		this.getList()
	},
	methods: {
		getList() {
			getAllStageTemplate({}).then(res => {
				this.list = res.data || []
			})
		},
		chooseTemplateStage(id, index) {
			this.activeIndex = index
			// const params = {
			// 	...this.option,
			// 	current_stage_group_id: id
			// }
			// uni.navigateTo({
			// 	url: `/pages/constructionSite/selStage${this.commonJS.queryData(params)}`
			// })
			if (this.option.url == '/pages/constructionSite/detail' || this.option.url == '/pages/constructionSite/infoEdit') {
				const params = {
					group_id: id,
					site_info_id: this.option.site_info_id
				}
				setStageTemplate(params).then(res => {
					this.toPrevPage(id)
				})
			} else {
				this.toPrevPage(id)
			}
		},
		toEditStageTemplate(id) {
			// const params = this.option
			// if (id) {
			// 	params.edit_group_id = id
			// }
			// uni.navigateTo({
			// 	url: `/pages/constructionSite/editStageTemplate${this.commonJS.queryData(params)}`
			// })
			const params = typeof id === 'number' ? `?edit_group_id=${id}` : ''
			uni.navigateTo({
				  url: `/pages/constructionSite/editStageTemplate${params}`
			})
		},
		toPrevPage(id) {
      		let pages = getCurrentPages()// 获取页面栈
			let prevPage = pages[pages.length - 2]// 上一个页面
			if (prevPage) {
				prevPage.$vm.option.current_stage_group_id = id
				uni.navigateBack()
			}
		},
		delStageTemplate(id) {
			uni.showModal({
				title: '提示',
				content: '确认删除该模板？',
				success: res => {
					if (res.confirm) {
            	delStageTemplate({ group_id: id }).then(() => {
							this.getList()
							uni.showToast({
								title: '删除成功',
								icon: 'success'
							})
						})
					}
				}
			})
		},
		showOptionBar(is_default, id) {
			let itemList = ['修改', '删除']
			if (!is_default) {
				itemList = ['设为默认模板', '修改', '删除']
			}
			uni.showActionSheet({
				itemList,
				success: res => {
					switch (res.tapIndex) {
						case 0:
							if (!is_default) {
								setDefaultStageTemplate({ id }).then(() => {
									this.getList()
									uni.showToast({
										title: '设置成功',
										icon: 'success'
									})
								  })
							} else {
								this.toEditStageTemplate(id)
							}
							break
						case 1:
							if (!is_default) {
                  	this.toEditStageTemplate(id)
							} else {
								this.delStageTemplate(id)
							}
							break
						case 2:
							this.delStageTemplate(id)
							break
					}
				}
			})
		}
	}
}
</script>

<style scoped lang="scss">
html {
  background-color: #f5f5f5;
}
.section_wrap {
  border-top: 20px solid #f5f5f5;
}
.app {
    padding: 0 30px 120px;
    box-sizing: border-box;
    min-height: 100vh;
    background-color: #f5f5f5;
    .section {
        background:rgba(255,255,255,1);
        border-radius:20px;
        padding: 20px;
        box-sizing: border-box;
        .top_bar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            .left {
                display: flex;
                align-items: center;
                  .sel {
				width: 46px;
				height: 46px;
				border-radius: 50%;
				display: flex;
				justify-content: center;
				align-items: center;
				border: 1px solid #ccc;
				background-color: #fff;
				&.on {
					border: 0 none;
					background: url($imgUrl+"common/selected.png") no-repeat
						center/cover #ffd11a;
				}
			}
                span {
                    font-size:28px;
                    font-weight:600;
                    color:rgba(51,51,51,1);
                    padding-left: 15px;
                }
                .label {
                    height:30px;
                    line-height: 30px;
                    padding: 0 11px;
                    background:rgba(238,238,238,1);
                    border:1px solid rgba(238, 238, 238, 1);
                    border-radius:15px;
                    margin-left: 10px;
                    font-size:24px;
                    color:rgba(153,153,153,1);
                }
            }
            .right {
                .btn{
                    width: 98px;
                    height:50px;
                    line-height: 50px;
                    text-align: center;
                    background:rgba(255,255,255,1);
                    border:1px solid #FF6900;
                    border-radius:25px;
                    font-size:24px;
                    color:rgba(255,105,0,1);
                }
            }
        }
        .label_list {
            margin-top: 22px;
            border-top: 1px solid rgba(238,238,238,1);
            padding-top: 30px;
            display: flex;
            flex-wrap: wrap;
            flex: 0 0 auto;
            .label_item {
                margin-right: 10px;
                margin-bottom: 10px;
                height:40px;
                line-height: 40px;
                text-align: center;
                padding: 0 16px;
                font-size:24px;
                color:rgba(102,102,102,1);
                background:rgba(255,255,255,1);
                border:1px solid rgba(238, 238, 238, 1);
                border-radius:20px;
            }
        }

    }
    .add_btn {
        width: 100%;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 999;
        height:100px;
        background:rgba(255,255,255,1);
        box-shadow:0px -3px 10px 0px rgba(0, 0, 0, 0.1);
        display: flex;
        justify-content: center;
        align-items: center;
        .center {
            display: flex;
            align-items: center;
            color: #FF6900;
            font-size:32px;
            .iconicon-test {
                font-size: 38px
            }
            span {
                padding-left: 10px;
            }
        }
    }
}
</style>
